<template>
    <div class="flowStep">
        <div style="width: 50%;margin: 0 auto">
            <el-steps
                :active="activeIndex"
                finish-status="success"
                align-center
            >
                <el-step v-for="item in flowNodeList" :title="item.name" />
            </el-steps>
        </div>
    </div>

    <el-form label-width="10%" :style="formCols" style="margin-top: 30px">
        <el-form-item v-for="(item, index) in formBuildList" :label="item.labelName">
            <component :is="item.component" :isEdit="false" :properties="item"/>
        </el-form-item>
    </el-form>

    <div class="formSubmitButton">
        <el-button @click="cancelHistoryFlow()">取消</el-button>
    </div>
</template>

<script>
import {queryHistoryInstanceDetail} from "@/request/flow";

export default {
    name: "HistoryFlowInstance",
    data() {
        return {
            globalProperties: {
                colNum: 1
            },
            submitCompleteInstanceLoading: false,
            formBuildList: [],
            taskId: "",
            activeIndex: 1,
            flowNodeList: []
        }
    },
    methods: {
        cancelHistoryFlow() {
            // 关闭当前窗口
            window.close();
        }
    },
    computed: {
        formCols() {
            let res = "display: grid;gap: 16px;"
            let repeat = `grid-template-columns: repeat(${this.globalProperties.colNum}, 1fr);`
            return res + repeat;
        }
    },
    created() {
        // 查询流程详情
        let id = this.$route.query.id;
        queryHistoryInstanceDetail({id: id}).then(res => {
            if (res.code === "200") {
                let formJson = res.data.formJson
                // 序列化json
                let jsonInfo = JSON.parse(formJson);
                this.globalProperties = jsonInfo.globalProperties
                this.formBuildList = jsonInfo.componentJson
                let formInstance = JSON.parse(res.data.formInstanceJson);
                // 将实例的值填入到表单bindValue中
                for (let index = 0; index < this.formBuildList.length; index++) {
                    let item = this.formBuildList[index];
                    if (item.id in formInstance) {
                        item.bindValue = formInstance[item.id]
                    }
                }
                this.taskId = res.data.taskId;
                // 解析表单结点
                let flowJson = JSON.parse(res.data.flowJson);
                this.flowNodeList.push(flowJson);
                let index = 1;
                while ("next" in flowJson && flowJson.next !== null) {
                    // 计算当前的活跃结点
                    if (res.data.currentNode === flowJson.next.id) {
                        if (res.data.currentNode === "nid-end") {
                            this.activeIndex = index + 1;
                        } else {
                            this.activeIndex = index;
                        }
                    }
                    this.flowNodeList.push(flowJson.next);
                    flowJson = flowJson.next
                    index++;
                }
            }
        })
    }
}
</script>

<style scoped lang="less">
.formSubmitButton {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flowStep {
    margin-top: 30px;
    margin-bottom: 60px;
}

.el-steps {
    width: 100%;
}
</style>